<template>
    <div>
        <div v-show="isInvestMember">
            <better-scroll
                ref="scroll"
                class="scroll-t"
                :refresh="initDataList"
                :onLoading="loadDataList"
                :isCategory="false"
            >
                <table border="1" width="100%" class="form-table">
                    <tr height="30px" colspan="6">
                        <th v-for="item in tableTitle">{{item.title}}</th>
                    </tr>
                    <!--提现记录-->
                    <tr v-for="item in loadData" height="30px" align="center" v-if="title=='提现记录'">
                        <td>{{item.id}}</td>
                        <td
                            class="content-amount"
                            :class="{'content-amount-active':item.amount<0}"
                        >{{computePrice(item.amount)}}</td>
                        <td
                            class="content-amount"
                            :class="{'content-amount-active':item.amount<0}"
                        >{{computePrice(item.poundage)}}</td>
                        <td>{{item.status_name}}</td>
                        <td>{{item.descs}}</td>
                        <td width="80px">{{item.createTime|transformTimestamp}}</td>
                        <td>
                            <span
                                v-if="item.status_name=='申请中'"
                                @click="cancel(item.id)"
                                class="cancel-btn"
                            >取消</span>
                        </td>
                    </tr>
                    <!--购物积分||增值积分-->
                    <tr
                        v-for="item in loadData"
                        height="30px"
                        align="center"
                        v-if="['购物积分','增值积分'].indexOf(title)>-1"
                    >
                        <td>{{item.id}}</td>
                        <td
                            class="content-amount"
                            :class="{'content-amount-active':item.amount<0}"
                        >{{computePrice(item.amount)}}</td>
                        <td
                            class="content-amount"
                            :class="{'content-amount-active':item.amount<0}"
                        >{{computePrice(item.old_amount)}}</td>
                        <td>{{item.descs}}</td>
                        <td>{{item.createTime|transformTimestamp}}</td>
                    </tr>
                    <!--股权投资-->
                    <tr v-for="item in loadData" height="30px" align="center" v-if="title=='股权投资'">
                        <td>{{item.id}}</td>
                        <td
                            class="content-amount"
                            :class="{'content-amount-active':item.amount<0}"
                        >{{computePrice(item.amount)}}</td>
                        <td>{{item.createTime|transformTimestamp}}</td>
                        <td>{{item.release_count}}</td>
                        <td>{{item.nextTime|transformTimestamp}}</td>
                    </tr>
                    <!--总收益-->
                    <tr v-for="item in loadData" height="30px" align="center" v-if="title=='销售明细'">
                        <td>{{item.id}}</td>
                        <td>{{item.type_name}}</td>
                        <td>{{computePrice(item.amount)}}</td>
                        <td>{{computePrice(item.bonus)}}</td>
                        <td>{{computePrice(item.point)}}</td>
                        <td>{{computePrice(item.mgr)}}</td>
                        <td>{{computePrice(item.love)}}</td>
                        <td>{{item.createTime|transformTimestamp}}</td>
                    </tr>
                    <!--合作伙伴-->
                    <tr v-for="item in loadData" height="30px" align="center" v-if="title=='合作伙伴'">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.createTime|transformTimestamp}}</td>
                    </tr>
                </table>
            </better-scroll>
            <!--提现-->
            <van-dialog
                v-model="isShowDialog"
                show-cancel-button
                :before-close="beforeClose"
                :title="diaLogTitle"
                v-if="diaLogTitle=='申请提现'"
            >
                <p
                    class="dialog-message plr15 ptb10"
                >您账户可提现的金额积分为：{{computePrice(userInfo.bonus_point)}}</p>
                <van-field type="number" v-model="form.amount" label="提现金额" placeholder="输入提现金额"></van-field>
                <van-field v-model="form.pwd2" type="password" label="二级密码" placeholder="请输入二级密码"></van-field>
            </van-dialog>
            <!--转账-->
            <van-dialog
                v-model="isShowDialog"
                show-cancel-button
                :before-close="beforeClose"
                :title="diaLogTitle"
                v-if="diaLogTitle=='转账'"
            >
                <van-field
                    v-model="cashInfo.receiveAccount"
                    label="收款人账号"
                    placeholder="输入收款人账号"
                    @blur="verifyAccount"
                ></van-field>
                <van-field
                    v-model="cashInfo.receiveName"
                    label="收款人姓名"
                    placeholder="自动生成"
                    disabled="true"
                ></van-field>
                <van-field type="number" v-model="form.amount" label="转账金额" placeholder="输入转账金额"></van-field>
                <van-field v-model="form.pwd2" type="password" label="二级密码" placeholder="请输入二级密码"></van-field>
            </van-dialog>
            <!--投资-->
            <van-dialog
                v-model="isShowDialog"
                show-cancel-button
                :before-close="beforeClose"
                :title="diaLogTitle"
                v-if="diaLogTitle=='投资'"
            >
                <van-field
                    v-model="investAmount"
                    type="number"
                    label="投资金额"
                    placeholder="请选择投资金额"
                    @click="openPopup(1)"
                ></van-field>
            </van-dialog>
            <!--冻结信息-->
            <van-dialog
                v-model="isShowDialog"
                show-cancel-button
                :before-close="beforeClose"
                :title="diaLogTitle"
                v-if="diaLogTitle=='冻结信息'"
            >
                <div v-if="frozen" style="text-align: center">
                    <p style="color: red;font-size: 12px;padding: 5px 0 ;">
                        解冻有效期{{frozen.expireTime-new
                        Date().getTime()|momentDay}}天,请尽快升级会员等级
                    </p>
                    <div>
                        <div v-if="frozen.bonus_1w||frozen.point_1w">
                            1w：
                            <span v-if="frozen.bonus_1w">
                                <span>销售积分：</span>
                                <span>{{computePrice(frozen.bonus_1w)}}</span>
                            </span>
                            <span v-if="frozen.point_1w">
                                <span>购物积分：</span>
                                <span>{{computePrice(frozen.bonus_1w)}}</span>
                            </span>
                        </div>
                        <div v-if="frozen.bonus_2w||frozen.point_2w">
                            2w：
                            <span v-if="frozen.bonus_2w">
                                <span>销售积分：</span>
                                <span>{{computePrice(frozen.bonus_2w)}}</span>&nbsp;
                            </span>
                            <span v-if="frozen.point_2w">
                                <span>购物积分：</span>
                                <span>{{computePrice(frozen.bonus_2w)}}</span>
                            </span>
                        </div>
                        <div v-if="frozen.bonus_5k||frozen.point_5k">
                            5k：
                            <span v-if="frozen.bonus_5k">
                                <span>销售积分：</span>,
                                <span>{{computePrice(frozen.bonus_5k)}}</span>
                            </span>
                            <span v-if="frozen.point_5k">
                                <span>购物积分：</span>
                                <span>{{computePrice(frozen.bonus_5k)}}</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div v-if="frozen==null">
                    <p style="font-size: 12px;text-align: center;padding: 5px 0;">没有冻结信息</p>
                </div>
            </van-dialog>
        </div>
        <!--注册投资会员-->
        <div v-show="!isInvestMember">
            <van-cell-group>
                <van-field label="真实姓名" v-model="registerForm.real_name" placeholder="请输入真实姓名"/>
                <van-field
                    label="手机号"
                    v-model="registerForm.phone"
                    placeholder="请输入手机号"
                    type="number"
                    maxlength="11"
                />
                <verify-code
                    :tel="registerForm.phone"
                    v-model="registerForm.code"
                    :type="0"
                    @codeValue="codeValue"
                    class="verity-code"
                ></verify-code>
                <van-field label="开户银行" v-model="registerForm.bank_name" placeholder="请输入开户银行"/>
                <van-field
                    label="银行卡号"
                    v-model="registerForm.bank_code"
                    placeholder="请输入银行卡号"
                    type="number"
                />
                <van-field label="开户行地址" v-model="registerForm.bank_addr" placeholder="请输入开户行地址"/>
                <van-field label="身份证" v-model="registerForm.idcard" placeholder="请输入身份证"/>
                <van-field
                    label="推荐人"
                    v-model="recommendMan"
                    placeholder="请输入推荐人姓名"
                    @blur="checkInvestRecommend"
                />
                <van-field
                    label="接点人"
                    v-model="contaceMan"
                    placeholder="请输入接点人姓名"
                    @blur="checkContactMan"
                />
                <van-field
                    label="接点位置"
                    v-model="registerForm.seat"
                    placeholder="请选择接点位置"
                    disabled="true"
                    is-link
                    @click.native="openPopup(0)"
                />
                <van-field
                    label="投资额度"
                    v-model="registerForm.amount"
                    placeholder="请选择投资额度"
                    disabled="true"
                    is-link
                    @click.native="openPopup(1)"
                />
                <van-field label="详细地址" v-model="registerForm.addrs" placeholder="请输入详细地址"/>
                <van-field
                    label="二级密码"
                    v-model="registerForm.pwd2"
                    placeholder="设置二级密码"
                    v-if="isPwd2"
                    type="password"
                />
            </van-cell-group>
            <div class="btn-box ptb10">
                <van-button class="btn" size="large" @click="register">注册投资会员</van-button>
            </div>
        </div>
        <van-popup v-model="show" position="bottom" class="popup-box plr15">
            <h3 class="flex-column popup-title">{{popupInfo.type==0?'接点位置':'投资额度'}}</h3>
            <ul class="ptb15">
                <li
                    v-for="item in popupInfo.list"
                    class="flex-column popup-item"
                    @click="popupChoice(item,popupInfo.type)"
                >{{item}}</li>
            </ul>
        </van-popup>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import verifyCode from "../../components/VerificationCode";
import md5 from "js-md5";

export default {
    name: "PointList",
    data() {
        return {
            params: { offset: 0, len: 10 },
            tableTitle: [
                { title: "编号" },
                { title: "金额" },
                { title: "余额" },
                { title: "说明" },
                { title: "时间" }
            ],
            path: "",
            title: "",
            isShowDialog: false,
            diaLogTitle: "",
            form: {
                amount: "",
                pwd2: ""
            },
            routes: [],

            cashInfo: {
                receiveName: "", //收款人
                receiveAccount: "",
                uid: ""
            },
            isInvestMember: true,
            registerForm: {
                real_name: "",
                phone: "",
                code: "",
                bank_name: "",
                bank_code: "",
                bank_addr: "",
                idcard: "",
                pwd2: "",
                rf: "", // 推荐人编号
                node: "", //接点人编号
                seat: "",
                amount: "",
                addrs: ""
            },
            show: false,
            moneyList: [3000, 5000, 10000, 20000],
            seatList: ["左", "中", "右"],
            popupInfo: { type: 0, list: [] },
            recommendMan: "", //推荐人
            contaceMan: "", //接点人
            isPwd2: true,
            investAmount: 0,
            frozen: {}
        };
    },
    components: { verifyCode },
    computed: {
        ...mapGetters(["sid", "rightStatus", "userInfo"])
    },
    watch: {
        rightStatus: function(status) {
            console.log(status);
            if (status) {
                console.log(this.title);
                if (
                    this.computePrice(this.userInfo.invest) >= 20000 &&
                    this.title == "股权投资"
                ) {
                    return this.fail("最高投资金额为20000");
                }
                this.isShowDialog = true;
            }
        }
    },
    created() {
        console.log(this.userInfo);
        this.$store.commit(types.SET_RIGHT_STATUS, false);
        this.routes = this.$router.options.routes;
        this.title = this.$route.query.name;
        this.routes.forEach(item => {
            if (item.name == "point-list") {
                if (this.title != "增值积分" || this.title != "提现记录")
                    item.meta.rightText = "";
                switch (this.title) {
                    case "购物积分":
                        item.meta.title = "购物积分明细";
                        this.path = "SHOP_POINT_LIST";
                        this.tableTitle = [
                            { title: "编号" },
                            { title: "金额" },
                            { title: "余额" },
                            { title: "说明" },
                            { title: "时间" }
                        ];
                        break;
                    case "增值积分":
                        item.meta.title = "增值积分明细";
                        item.meta.rightText = "转账";
                        this.diaLogTitle = "转账";
                        this.path = "BONUS_POINT_LIST";
                        tableTitle: [
                            { title: "编号" },
                            { title: "金额" },
                            { title: "余额" },
                            { title: "说明" },
                            { title: "时间" }
                        ];
                        break;
                    case "提现记录":
                        item.meta.title = "提现记录";
                        this.path = "CASH_LIST";
                        item.meta.rightText = "申请提现";
                        this.diaLogTitle = "申请提现";
                        this.tableTitle = [
                            { title: "编号" },
                            { title: "金额" },
                            { title: "手续费" },
                            { title: "状态" },
                            { title: "备注" },
                            { title: "申请时间" },
                            { title: "操作" }
                        ];
                        break;
                    case "股权投资":
                        item.meta.title = "股权投资";
                        item.meta.rightText = "投资";
                        this.diaLogTitle = "投资";
                        this.path = "INVEST_STOCK_LIST";
                        this.tableTitle = [
                            { title: "编号" },
                            { title: "投资金额" },
                            { title: "投资时间" },
                            { title: "释放次数" },
                            { title: "下次释放" }
                        ];
                        this.checkInvestmentMember();
                        break;
                    case "销售明细":
                        item.meta.title = "销售明细";
                        item.meta.rightText = "冻结信息";
                        this.diaLogTitle = "冻结信息";
                        this.path = "SALE_LIST";
                        this.tableTitle = [
                            { title: "编号" },
                            { title: "类型" },
                            { title: "累计积分" },
                            { title: "增值积分" },
                            { title: "购物积分" },
                            { title: "平台管理" },
                            { title: "爱心基金" },
                            { title: "时间" }
                        ];
                        this.frozenInfo();
                        break;
                    case "合作伙伴":
                        item.meta.title = "合作伙伴";
                        this.path = "TEAM_LIST";
                        this.tableTitle = [
                            { title: "编号" },
                            { title: "名字" },
                            { title: "时间" }
                        ];
                }
            }
        });
        if (this.sid) this.initDataList();
    },
    methods: {
        initParams() {
            this.params.offset = 0;
            this.loadData = [];
        },
        initDataList() {
            this.initParams();
            this.loadDataList();
        },
        loadDataList() {
            this.pubilcInitDataList(this.path, this.params);
        },

        setStatus() {
            this.routes.forEach(item => {
                if (item.name == "point-list") {
                    item.meta.rightStatus = false;
                    this.$store.commit(types.SET_RIGHT_STATUS, false);
                    return;
                }
            });
        },

        //关闭弹框触发
        beforeClose(action, done) {
            console.log(action);
            if (action === "confirm") {
                if (this.diaLogTitle == "冻结信息") {
                    this.setStatus();
                    done();
                    return;
                }
                if (this.diaLogTitle == "投资") {
                    console.log(this.investAmount);
                    if (this.investAmount == 0) {
                        done(false);
                        return this.fail("投资金额不能为0");
                    }
                    this.$store
                        .dispatch(types.INVEST_STOCK, {
                            amount: this.investAmount * 100
                        })
                        .then(res => {
                            console.log(res);
                            if (res.code !== 0) return this.fail(res.msg, 1500);
                            this.success("投资成功");
                            this.initDataList();
                            this.setStatus();
                            done();
                            return;
                        });
                }

                if (this.diaLogTitle == "转账" && this.cashInfo.uid == "") {
                    this.fail("请输入收款人账号");
                    done(false);
                    return;
                }
                if (this.form.amount % 100 != 0) {
                    this.fail("请输入100的倍数");
                    done(false);
                    return;
                }
                if (this.form.pwd2 == "") {
                    this.fail("请输入二级密码");
                    done(false);
                    return;
                }
                if (this.diaLogTitle == "转账") {
                    console.log(this.form);
                    this.$store
                        .dispatch(types.INVEST_TRANSFER, {
                            tid: this.cashInfo.uid,
                            amount: this.form.amount * 100,
                            pwd2: md5(this.form.pwd2)
                        })
                        .then(res => {
                            console.log(res);
                            if (res.code != 0) {
                                this.fail(res.msg);
                                console.log(res);
                                done(false);
                            } else {
                                this.success("转账成功");
                                done();
                                this.setStatus();
                                this.initDataList();
                            }
                        });
                }
                if (this.diaLogTitle == "申请提现") {
                    this.$store
                        .dispatch(types.CASH_POINT, {
                            amount: this.form.amount * 100,
                            pwd2: md5(this.form.pwd2)
                        })
                        .then(res => {
                            console.log(res);
                            if (res.code != 0) {
                                this.fail(res.msg);
                                done(false);
                            } else {
                                this.success("申请提现成功");
                                done();
                                this.setStatus();
                                this.initDataList();
                            }
                        });
                }
            } else {
                this.setStatus();
                done();
            }
        },
        //验证账户信心（失去焦点触发）
        verifyAccount() {
            if (this.cashInfo.receiveAccount == "")
                return this.fail("收款人账户不能为空");
            this.$store
                .dispatch(types.INVEST_CHECKUSER, {
                    name: this.cashInfo.receiveAccount
                })
                .then(res => {
                    console.log(res);
                    if (res.code != 0) return this.fail(res.msg);
                    this.cashInfo.receiveName = res.name;
                    this.cashInfo.uid = res.uid;
                    console.log(this.cashInfo);
                });
        },
        cancel(id) {
            let that = this;
            utils.dialog.confirm({
                content: "确定要取消提现吗？",
                confirm: function() {
                    that.$store
                        .dispatch(types.CASH_CANCEL, { id: id })
                        .then(res => {
                            console.log(res);
                            if (res.code !== 0) return this.fail(res.msg);
                            that.initDataList();
                        });
                }
            });
        },

        //检测投资会员
        checkInvestmentMember() {
            this.$store
                .dispatch(types.INVEST_CHECKUSER, {
                    name: this.userInfo.name,
                    check_invest: true,
                    check_pwd2: true
                })
                .then(res => {
                    console.log(res);
                    this.isPwd2 = !res.is_setPwd2;
                    if (res.code !== 0) {
                        this.isInvestMember = false;
                    } else {
                        this.isInvestMember = true;
                    }
                });
        },
        //检测推荐人
        checkInvestRecommend() {
            if (this.recommendMan == "") return this.fail("推荐人不能为空");
            this.load();
            this.$store
                .dispatch(types.INVEST_CHECKUSER, {
                    name: this.recommendMan,
                    check_invest: true
                })
                .then(res => {
                    this.clear();
                    console.log(res);
                    if (res.code == 0) {
                        this.recommendMan =
                            this.recommendMan + "(" + res.name + ")";
                        this.registerForm.rf = res.uid;
                        return;
                    }
                    this.recommendMan = "";
                    this.fail(res.msg);
                });
        },
        //检测接点人
        checkContactMan() {
            if (this.contaceMan == "") return this.fail("接点人不能为空");
            this.load();
            this.$store
                .dispatch(types.INVEST_CHECKUSER, {
                    name: this.contaceMan,
                    check_point: true
                })
                .then(res => {
                    this.clear();
                    console.log(res);
                    if (res.code == 0) {
                        this.contaceMan =
                            this.contaceMan + "(" + res.name + ")";
                        this.registerForm.node = res.uid;
                        return;
                    }
                    this.contaceMan = "";
                    this.fail(res.msg);
                });
        },
        //注册投资会员
        register() {
            console.log(this.registerForm);
            if (this.registerForm.real_name == "")
                return this.fail("真实姓名不能为空");
            if (this.registerForm.phone == "")
                return this.fail("手机号不能为空");
            if (this.validatePhone(this.registerForm.phone))
                return this.fail("请输入正确的手机号码");
            if (this.registerForm.code == "") return this.fail("请输入验证码");
            if (this.registerForm.bank_name == "")
                return this.fail("开户银行不能为空");
            if (this.registerForm.bank_code == "")
                return this.fail("银行卡号不能为空");
            if (this.registerForm.bank_addr == "")
                return this.fail("开户行地址不能为空");
            if (this.registerForm.idcard == "")
                return this.fail("身份证不能为空");
            if (this.registerForm.rf == "") return this.fail("推荐人不能为空");
            if (this.registerForm.node == "")
                return this.fail("接点人不能为空");
            if (this.registerForm.seat == "")
                return this.fail("请选择接点位置");
            if (this.registerForm.amount == "")
                return this.fail("请选择投资额度");
            if (this.isPwd2 && this.registerForm.pwd2 == "")
                return this.fail("二级密码不能为空");
            if (this.registerForm.seat == "左") this.registerForm.seat = 1;
            if (this.registerForm.seat == "中") this.registerForm.seat = 2;
            if (this.registerForm.seat == "右") this.registerForm.seat = 3;
            this.$store
                .dispatch(types.INVEST_REGISTER, this.registerForm)
                .then(res => {
                    console.log(res);
                    if (res.code !== 0) {
                        this.registerForm.seat = "";
                        this.registerForm.pwd2 = "";
                        this.registerForm.amount = "";

                        return this.fail(res.msg);
                    }
                    this.success("注册成功");
                    this.checkInvestmentMember();
                    this.initDataList();
                });
        },

        codeValue(value) {
            this.registerForm.code = value;
        },
        //冻结信息
        frozenInfo() {
            this.$store.dispatch(types.FROZEN_INFO).then(res => {
                console.log(res);
                if (res.code !== 0) return this.fail(res.msg);
                this.frozen = res.frozen;
            });
        },
        //打开popup
        openPopup(index) {
            if (index == 0) {
                this.popupInfo.list = this.seatList;
                this.popupInfo.type = 0;
            }
            if (index == 1) {
                this.filterInvest();
                this.popupInfo.type = 1;
            }
            this.show = true;
        },

        //过滤投资金额
        filterInvest() {
            this.popupInfo.list = [];
            this.moneyList.filter(item => {
                if (item > this.computePrice(this.userInfo.invest))
                    this.popupInfo.list.push(item);
            });
        },
        //popup回掉
        popupChoice(value, type) {
            console.log(value, type);
            this.show = false;
            if (type == 1 && this.isInvestMember) {
                this.investAmount =
                    value - this.computePrice(this.userInfo.invest);
                return;
            }
            if (type == 0) return (this.registerForm.seat = value);
            if (type == 1) return (this.registerForm.amount = value);
        }
    }
};
</script>

<style scoped lang="scss">
.grid-title {
    width: 100%;
    font-weight: bold;
    overflow: hidden;
    .yd-grids-item {
        font-size: 14px;
    }
}

.grid-content {
    span {
        white-space: normal;
    }
}

.scroll-t {
    top: 50px;
}

.content-amount {
    color: #028bf9;
    &-active {
        color: $theme-color;
    }
}

.form-table {
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-left: 0;
    border-right: 0;
    tr {
        height: 50px;
    }
    tr > th {
        font-weight: bold;
    }
}

.dialog-message {
    font-size: 13px;
}

.cancel-btn {
    background: $theme-color;
    padding: 3px 7px;
    border-radius: 2px;
    color: #fff;
}

.popup-box {
    font-size: 14px;
    .popup-title {
        font-size: 16px;
        height: 40px;
        justify-content: center;
        border-bottom: 1px solid #efefef;
    }
    .popup-item {
        height: 40px;
        justify-content: center;
    }
}
</style>
